<template>
	<view class="buttenBorder">
		<uni-forms ref="secondApproval" :rules="rules" :modelValue="baseFormData">
			<uni-forms-item label="审批人" required name="approver">
				<uni-data-checkbox v-model="baseFormData.approver" :localdata="approvers" />
			</uni-forms-item>
			<uni-forms-item label="审批意见" required name="approvalOpinions">
				<uni-data-checkbox v-model="baseFormData.approvalOpinions" :localdata="approvalOpinions" />
			</uni-forms-item>
			<uni-forms-item label="车辆分配" required name="autoType">
				<uni-data-select v-model="baseFormData.autoType" :localdata="autoTypeRange"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="驾驶员分配" required name="driverType">
				<uni-data-select v-model="baseFormData.driverType" :localdata="driverTypeRange"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="审批备注">
				<uni-easyinput type="textarea" v-model="baseFormData.approvalRemarks" placeholder="请输入审批备注" />
			</uni-forms-item>
			<button type="primary" @click="submit('secondApproval')">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		name: "secondApproval",
		data() {
			return {
				baseFormData: {
					approver: "",
					approvalOpinions: "",
					autoType: "",
					driverType: "",
					approvalRemarks: "",
				},
				approvers: [{
					text: "李世贤",
					value: "李世贤",
				}],
				approvalOpinions: [{
					text: "同意",
					value: "同意",
				}, {
					text: "不同意",
					value: "不同意",
				}],
				autoTypeRange: [{
						value: "皖A·12345",
						text: "皖A·12345"
					},
					{
						value: "皖A·45468",
						text: "皖A·45468"
					},
					{
						value: "皖A·98571",
						text: "皖A·98571"
					}
					// ... 更多车型选项 ...
				],
				driverTypeRange: [{
					value: "李世贤",
					text: "李世贤",
				}, {
					value: "唐旭",
					text: "唐旭",
				}],
				rules: {
					approver: {
						rules: [{
							required: true,
							errorMessage: "请选择审批人",
						}],
					},
					approvalOpinions: {
						rules: [{
							required: true,
							errorMessage: "请选择审批意见",
						}],
					},
					autoType: {
						rules: [{
							required: true,
							errorMessage: "请选择车辆分配",
						}],
					},
					driverType: {
						rules: [{
							required: true,
							errorMessage: "请选择驾驶员分配",
						}]
					},
				},
			};
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then((res) => {
					console.log("Form submission successful");
					console.log("Submitted data:", this.baseFormData);
					uni.showToast({
						title: `校验通过`,
						duration: 1000,
					});
				}).catch((err) => {
					console.log("Form validation failed");
					console.log("Validation errors:", err);

					// 打印每个字段的具体错误信息
					err.forEach((error) => {
						console.log(`Error in ${error.key}: ${error.errorMessage}`);
					});

					uni.showToast({
						title: `校验失败`,
						icon: "none",
						duration: 1000,
					});
				});
			},
		},
	};
</script>

<style>
	.buttenBorder {
		padding: 15px;
		background-color: #fff;
	}
</style>